<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>新年贺卡</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            border: none;
            font-family: 'Microsoft YaHei';
            /*-webkit-transform: translate3d(0,0,0);*/
        }

        html, body {
            height: 100%;
            overflow: hidden;
        }

        #page1 {
            background: url('images/pic_bg@2x.png') no-repeat center center;
            background-size: 100% 100%;
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: -1;
            opacity: 1;
        }

        #flower {
            background: url('images/flower@2x.png') no-repeat;
            background-size: 100%;
            position: absolute;
            top: 0;
            right: 0;
            width: 140px;
            height: 90px;
        }

        #logo {
            background: url('images/logo@2x.png') no-repeat;
            background-size: 100%;
            position: absolute;
            top: 20px;
            left: 20px;
            width: 100px;
            height: 45px;
        }

        #newyear {
            background: url('images/pic_newyear@2x.png') no-repeat;
            background-size: 100%;
            position: absolute;
            top: 80px;
            left: 0px;
            right: 0px;
            width: 180px;
            height: 300px;
            margin: 0 auto;
            z-index: 0;
        }

        #text-1 {
            background: url('images/pic_Chinese@2x.png') no-repeat;
            background-size: 100%;
            position: absolute;
            top: 350px;
            left: 0px;
            right: 0px;
            width: 220px;
            height: 14px;
            margin: 0 auto;
        }

        #text-2 {
            position: absolute;
            top: 365px;
            left: 0px;
            right: 0px;
            width: 280px;
            margin: 0 auto;
            font-size: 6px;
            font-family: "Microsoft YaHei";
            color: #333333;
        }

        #redpack1 {
            background: url('images/pic_redpack1@2x.png') no-repeat;
            background-size: 100%;
            position : absolute;
            top: 95px;
            right: 35px;
            width: 30px;
            height: 35px;
        }

        #redpack2 {
            background: url('images/pic_redpack2@2x.png') no-repeat;
            background-size: 100%;
            position : absolute;
            top: 105px;
            left: 30px;
            width: 39px;
            height: 40px;
        }

        #redpack3 {
            background: url('images/pic_redpack3@2x.png') no-repeat;
            background-size: 100%;
            position : absolute;
            top: 220px;
            left: 70px;
            width: 21px;
            height: 23px;
        }

        #redpack4 {
            background: url('images/pic_redpack4@2x.png') no-repeat;
            background-size: 100%;
            position : absolute;
            top: 180px;
            right: 60px;
            width: 27px;
            height: 27px;
        }

        #money1 {
            background: url('images/pic_money1@2x.png') no-repeat;
            background-size: 100%;
            position : absolute;
            top: 160px;
            left: 50px;
            width: 15px;
            height: 15px;
        }

        #money2 {
            background: url('images/pic_money2@2x.png') no-repeat;
            background-size: 100%;
            position : absolute;
            top: 305px;
            left: 60px;
            width: 15px;
            height: 15px;
        }

        #money3 {
            background: url('images/pic_money3@2x.png') no-repeat;
            background-size: 100%;
            position : absolute;
            top: 300px;
            right: 100px;
            width: 22px;
            height: 36px;
        }

        #firework1 {
            background: url('images/pic_fireworks1@2x.png') no-repeat;
            background-size: 100%;
            position : absolute;
            top: 260px;
            left: 55px;
            width: 53px;
            height: 53px;
        }

        #firework2 {
            background: url('images/pic_fireworks2@2x.png') no-repeat;
            background-size: 100%;
            position : absolute;
            top: 210px;
            right: 60px;
            width: 65px;
            height: 65px;
        }

    </style>

    <!-- 动画 -->
    <style>
        #logo {
            animation-delay: .5s;
        }

        #flower {

        }

        #redpack1 {
            animation-delay: .5s;
        }

        #redpack2 {
            animation-delay: .9s;
        }

        #redpack3 {
            animation-delay: 1.1s;
        }

        #redpack4 {
            animation-delay: 1.3s;
        }

        #money1 {
            animation-delay: .6s;
        }

        #money2 {
            animation-delay: .9s;
        }

        #money3 {
            animation-delay: 1.5s;
        }

        .infinite {
            animation-iteration-count: infinite;
        }

        .text {
            animation-delay: 1.5s;
        }

    </style>
</head>
<body>
<audio autoplay="true" loop="true">
    <source src="audio/happynewyear.mp3" type="audio/mpeg">
</audio>
<div id="page1">
    <div id="logo" class=" animated zoomInLeft"></div>
    <div id="flower" class=" animated pulse"></div>
    <div id="newyear" class=" animated fadeInDown"></div>
    <div id="redpack1" class="redpack animated fadeInDown"></div>
    <div id="redpack2" class="redpack animated fadeInDown"></div>
    <div id="redpack3" class="redpack animated fadeInDown"></div>
    <div id="redpack4" class="redpack animated fadeInDown"></div>
    <div id="money1" class="money animated fadeInDown"></div>
    <div id="money2" class="money animated fadeInDown"></div>
    <div id="money3" class="money animated fadeInDown"></div>
    <div id="firework1" class="firework"></div>
    <div id="firework2" class="firework"></div>
    <div id="text-1" class="text animated fadeIn"></div>
    <div id="text-2" class="text animated fadeIn">
        &nbsp;&nbsp;Another year,another new station stop time,to say goodbye to the old year,to the next year to months and years of experience,relentless passage,heart and rising new hopes.
        <div style="text-align: center;">Let us embrace the new year,the future together!</div>
    </div>
</div>

<script src="js/ThreeCanvas.js"></script>
<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
<script src="js/Snow.js"></script>
<script src="js/snowFall.js"></script>
<script type="text/javascript">
        $.snowFall({
            //创建粒子数量，密度
            particleNo: 60,
            //粒子下拉速度
            particleSpeed: 50,
            //粒子在垂直（Y轴）方向运动范围
            particleY_Range: 800,
            //粒子在垂直（X轴）方向运动范围
            particleX_Range: 500,
            //是否绑定鼠标事件
            bindMouse: false,
            //相机离Z轴原点距离
            zIndex: 600,
            //摄像机视野角度
            angle: 55,
            wind_weight: 0
        });

</script>

<!-- 动画 -->
<script>
    $.fn.extend({
        animateCss: function (animationName, callback) {
            var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
            this.addClass('animated ' + animationName).one(animationEnd, function() {
                $(this).removeClass('animated ' + animationName);
                if (callback) {
                    callback();
                }
            });
            return this;
        }
    });

    // logo
    $('#logo').animateCss('zoomInLeft', function () {
        setTimeout(function () {
            $('#logo').addClass('animated rubberBand')
        },900)
    })

    // 新年贺春
    $('#newyear').animateCss('fadeInDown', function () {
        setTimeout(function () {
            $('#newyear').addClass('animated wobble')
        },300)

        setTimeout(function () {
            $('#newyear').removeClass('animated wobble')
            $('#newyear').addClass('infinite animated pulse')
        },2000)
    })

    // 红包
    $('#redpack1').animateCss('fadeInDown', function () {
            $('#redpack1').addClass('infinite animated pulse')
    })
    $('#redpack2').animateCss('fadeInDown', function () {
        $('#redpack2').addClass('infinite animated pulse')
    })
    $('#redpack3').animateCss('fadeInDown', function () {
        $('#redpack3').addClass('infinite animated pulse')
    })
    $('#redpack4').animateCss('fadeInDown', function () {
        $('#redpack4').addClass('infinite animated pulse')
    })

    $('#money1').animateCss('fadeInDown', function () {
        $('#money1').addClass('infinite animated pulse')
    })
    $('#money2').animateCss('fadeInDown', function () {
        $('#money2').addClass('infinite animated pulse')
    })
    $('#money3').animateCss('fadeInDown', function () {
        $('#money3').addClass('infinite animated pulse')
    })
</script>

</body>
</html>